<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Gentelella Alela! | </title>

    <!-- Bootstrap -->
    <link href="/resources/gentelella/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="/resources/gentelella/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="/resources/gentelella/vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="/resources/gentelella/vendors/iCheck/skins/flat/green.css" rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link href="/resources/gentelella/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link href="/resources/gentelella/vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link href="/resources/gentelella/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="/resources/gentelella/css/custom.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/resources/datatables/dataTables.bootstrap.css?v=2">
    <link href="/resources/gentelella/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="/resources/paginator/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="/resources/css/self.css" rel="stylesheet">
    <!-- table -->
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/resources/My97DatePicker/WdatePicker.js"></script>
    <script src="/resources/datatables/jquery.dataTables.min.js"></script>
    <script src="/resources/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/resources/paginator/js/bootstrap-paginator.js"></script>
    <script src="/resources/js/self.js"></script>
    <style type="text/css">
        .form-data{
            width: 150px !important;
        }
    </style>
</head>

<body>
<div class="col-md-12">
    <div class="box-body" style="padding-bottom:10px;">
        <div class="row form-inline" style="margin-left: 20px;">

            <div class="form-group">
                <label>产品:</label>
                <select name="productId" id="productId" class="form-control form-data">
                </select>

            </div>
            <div class="form-group">
                <label>企业名称:</label>
                <select name="companyId" id="companyId" class="form-control form-data">
                </select>

            </div>
            <div class="form-group">
                <input type="hidden" class="form-control form-data" name="process"/>
                <label>时间</label>
                <input type="text" id="timeBegin" name="timeBegin" class="form-control form-data"
                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd  HH:mm:ss'})">
            </div>
            <div class="form-group">
                <input type="hidden" class="form-control form-data" name="process"/>
                <label>-</label>
                <input type="text" id="timeEnd" name="timeEnd" class="form-control form-data"
                       onclick="WdatePicker({dateFmt:'yyyy-MM-dd  HH:mm:ss'})">
            </div>
            <button type="button"  onclick="searchData()" class="btn btn-primary">查询</button>

        </div>
    </div>
    <div class="x_panel">

        <table class="table table-bordered table-striped dataTable" cellspacing="0" width="100%">
            <tr>
                <th class="serial">序号</th>

                <th class="serial">月份</th>

                <th>采集数值</th>
            </tr>
            <tbody id="data">

            </tbody>
        </table>
    </div>
</div>


</body>
<script type="text/javascript">
    $(function () {
        setTitle("查询统计>查询统计");
        buildSelect("/admin/company/listAll.do","#companyId","id","name",{});
        buildSelect("/admin/mProduct/listAll.do","#productId","id","name",{});
    });
    function getParam(){
        var param = getPageDataByClass("form-data");
        param['page']= 1;
        param['size']= 1000;
        param['groupBy']= "month";
        return param;
    }
    function searchData() {
        $("#data").html("");
        var param = getParam();
        if(isNullOrUndefined(param['timeBegin'])){
            alert("开始时间错误!");
            return;
        }
        if(isNullOrUndefined(param['timeEnd'])){
            alert("结束时间错误!");
            return;
        }
        $.ajax({
            url:"/admin/statistics/statistics.do",
            data:param,
            type:'post',
            dataType:'json',
            success:function(data){
                console.log(data);
                if(data.success){
                     console.log(data);
                     if(isNullOrUndefined(data.data)){
                         alert("没有数据");
                     }else {
                         var html = "";
                         $(data.data).each(function (index,item) {

                             html = html+"<tr><td>"+(index+1)+"</td><td>"+item.groupBy+"</td>"+
                             "<td>"+item.value+"</td>"+

                                 "</tr>";
                         });

                         $("#data").html(html);
                     }

                }
            }
        });
    }



</script>
</html>